<template>
  <view>
    <view class="goods c-p15">
      <view>
        <view class="c-flex c-mt20" @click="toDetail">
          <view class="c-flex-3">
            <image :src="goods.albumPics ? goods.albumPics.split(',')[0] : goods.productPic"></image>
          </view>
          <view class="c-flex-7 c-flex c-flex-column c-flex-between">
            <view class="title c-overflow-2"> {{ goods.name || goods.productName }}</view>
            <view class="sku c-flex c-flex-between">
              <text class="c-mr10">{{ goods.skuName }}</text>
              <view class="c-fs-24 desc">
                <text>*</text>
                {{ goods.count || goods.productCount }}
              </view>
            </view>
            <view class="desc c-relative c-flex c-flex-between">
              <view> ￥{{ goods.price || goods.payablePrice }} </view>
              <view v-if="status">
                <button @click.stop="tui" v-if="goods.afterSaleStatus == 0" class="tui">退款</button>
                <button v-else-if="goods.afterSaleStatus == 1" class="tui dis">退款中</button>
                <button v-else-if="goods.afterSaleStatus == 2" class="tui dis">退款成功,请联系客服</button>
                <button v-else-if="goods.afterSaleStatus == 3" class="tui dis">退款失败,请联系客服</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['goods', 'i', 'status', 'rejectedStatus', 'onlyRejectedStatus'],
  data() {
    return {}
  },
  methods: {
    tui() {
      this.$emit('tui', this.goods.id)
    },
    toDetail() {
      let id = this.goods.productId || this.goods.id
      wx.navigateTo({
        url: '/pages/productDetails/index?id=' + id
      })
    }
  }
}
</script>
<style scoped>
.c-flex >>> uni-button {
  display: inline-block;
}
</style>
<style lang="scss" scoped>
.goods {
  background: #fff;
}
.sku > text {
  background: #f3f3f3;
  color: #6c6c6c;
  font-size: 24rpx;
  padding: 5px 10px;
  border-radius: 80px;
}
.button-box {
  width: 80%;
  margin: 0 auto;
}
.c-green {
  color: #06c284;
}
image {
  width: 190rpx;
  border-radius: 10rpx;
  height: 190rpx;
}
.title {
  color: #000;
  font-size: 32rpx;
  font-weight: 500;
}
.desc {
  font-size: 28rpx;
  color: #ff6a21;
  // padding-bottom: 30rpx;
  // margin-top: 60rpx;
}
.item {
  .c-flex-3 {
    color: #a7adba;
    font-size: 30rpx;
  }
}
button {
  display: inline-block;
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: $main-color;
  color: #fff;
  border-radius: 20rpx;
  font-size: 30rpx;
}

.refund {
  color: #f31f42;
}
.tui {
  position: absolute;
  right: 0;
  border-radius: 80px;
  background: none;
  border: 1px solid #f3651f;
  color: #f3651f;
  font-size: 22rpx;
  bottom: 0px;
  width: 128rpx;
  height: 50rpx;
  line-height: 49rpx;
}
.dis {
  width: auto !important;
  border-color: #f31f42;
  color: #f31f42;
}
</style>
